{% extends "forum_base.html" %}
{% load forum_tags %}
{% load accounts_tags %}
{% load static %}

{% block headtitle %}Edit Profile{% endblock %}

{% block head %}
    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link disabled rel="stylesheet"
          href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/default.min.css">
    <script async src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/highlight.min.js"></script>
{% endblock %}

{% block js %}
    <script src="{% static 'semantic.min.js' %}"></script>
    <script src="{% static 'prism.js' %}"></script>
    <script src="{% static 'setup.js' %}{% randparam %}"></script>
{% endblock %}
{% block themesjs %}
{% endblock %}
{% block content %}




    <div class="ui horizontal segments no-shadow">


        <div class="ui segment  no-shadow"></div>
        <div class="ui basic compact segment no-shadow" id="edit_profile">


            <form method="post" class="ui equal width form" action="{% url 'edit_profile' %}">
                {{ form.media }}
                {% csrf_token %}

                {% form_errors form %}

                <div class="ui basic center aligned segment">
                    <span class="ui header">Edit Your Profile</span>
                </div>

                <div class="fields">

                    <div class="required form-field field">

                        <label><i class="address card icon"></i> Display Name</label>
                        {{ form.name }}
                        <div class="muted">
                            Shown for content you create
                        </div>

                    </div>


                    <div class="required form-field field">

                        <label><i class="at icon"></i> Handle</label>
                        {{ form.handle }}
                        <div class="muted">
                            People use it to to tag you: <code>@foo</code>.
                        </div>

                    </div>

                </div>

                <div class="fields">


                    <div class="required form-field field">

                        <label><i class="envelope icon"></i> Email</label>
                        {{ form.email }}
                        <div class="muted">
                            Your email
                        </div>

                    </div>

                    <div class="required form-field field">

                        <label><i class="envelope icon"></i> User icon style</label>
                        {{ form.user_icon }}
                        <div class="muted">
                            User icon obtained from Gravatar.
                        </div>

                    </div>

                </div>

                <div class="fields">

                    <div class="field">

                        <label><i class="linkify icon"></i> Website</label>
                        {{ form.website }}
                        <div class="muted">
                            The URL to your website
                        </div>

                    </div>

                    <div class="field">

                        <label><i class="map marker alternate icon"></i> Location</label>
                        {{ form.location }}
                        <div class="muted">
                            Geographical location
                        </div>

                    </div>


                </div>


                <div class="fields">
                    <div class="field">

                        <label><i class="twitter icon"></i> Twitter handle</label>
                        {{ form.twitter }}
                        <div class="muted">
                            Your Twitter id
                        </div>

                    </div>

                    <div class="field">

                        <label><i class="google icon"></i> Google Scholar</label>
                        {{ form.scholar }}
                        <div class="muted">
                            Your Google Scholar ID
                        </div>

                    </div>
                </div>
                <div class="fields">

                    <div class="field">

                        <label><i class="bell icon"></i> Digest Preferences </label>
                        {{ form.digest_prefs }}
                        <div class="muted">
                            {{ form.digest_prefs.help_text }}
                        </div>

                    </div>

                    <div class="field">

                        <label><i class="bell icon"></i> Notification settings </label>
                        {{ form.message_prefs }}
                        <div class="muted">
                            {{ form.message_prefs.help_text }}
                        </div>

                    </div>

                </div>

                <div class="fields">
                    <div class="field">

                        <label><i class="tags icon"></i> My Tags </label>
                        {% block my_tags %}
                        <div class="field">
                            {{ form.my_tags }}
                            <div class="muted">
                                Post with tags listed here will show up in the My Tags tab.
                                Example: <code>bwa</code>, <code>bedops</code>
                            </div>
                        </div>
                        {% endblock %}


                    </div>
                </div>

                <div class="fields">
                    <div class="field">

                        <label><i class="tags icon"></i> Watched Tags </label>
                        {% block watched_tags %}
                        <div class="field">
                            {{ form.watched_tags }}
                            <div class="muted">
                                Get email when a post matching the tag is posted. Limit of 10.
                                Example: <code>minia</code>, <code>bedops</code>, <code>breakdancer</code>,
                                <code>music</code>.
                            </div>

                        </div>
                        {% endblock %}
                    </div>
                </div>

                <div class="fields">

                    <div class="field">

                        <label><i class="info circle icon"></i> Profile information (markdown)</label>
                        {{ form.text }}
                        <div class="muted">
                            {{ form.text.help_text }}
                        </div>

                    </div>

                </div>

                <button type="submit" class="ui submit green button">
                    <i class="save icon"></i>Submit
                </button>

                <a class="ui right floated button" href="{% url "user_profile" user.profile.uid %}">
                    <i class="undo icon"></i>Cancel
                </a>


            </form>
        </div>

        <div class="ui segment no-shadow"></div>
    </div>


{% endblock %}
